import { ChartStrategy } from "@/hooks/useECharts"
import { EChartsOption } from "echarts"
import { TitleOption, YAXisOption, XAXisOption, GridOption } from "echarts/types/dist/shared"

export class LineOptionStrategy implements ChartStrategy {
  getOptions(options: EChartsOption | null): EChartsOption {
    const title = options && (options.title as TitleOption)
    const xAxis = options && (options.xAxis as XAXisOption)
    const yAxis = options && (options.yAxis as YAXisOption)
    const grid = options && (options.grid as GridOption)
    return {
      title: {
        left: "center",
        text: title && title.text ? title.text : ""
      },
      xAxis: {
        name: xAxis && xAxis.name ? xAxis.name : "",
        type: "category",
        data: [],
        nameTextStyle: {
          fontSize: 16
        }
      },
      yAxis: {
        name: yAxis && yAxis.name ? yAxis.name : "",
        type: "value",
        nameTextStyle: {
          fontSize: 16,
          align: "left",
          verticalAlign: "middle"
        },
        axisLabel: {
          rotate: 90
        }
      },
      grid: grid
        ? grid
        : {
            left: "8%",
            bottom: "8%"
          },
      series: [
        {
          data: [],
          type: "line",
          label: {
            fontSize: 18
          }
        }
      ]
    }
  }
}
